$bgColor: #fff;
$textColor: rgba(#000, 0.86);
$fadeColor: rgba(#000, 0.6);
$darkColor: rgba(#000, 0.98);
$highlightColor: #bd6262;
$mainWidth: 860px;
$mainWidth-narrow: 760px;
$mainWidth-wide: 1024px;
$mainWidth-wider: 100%;
$bannerHeight: 350px;
$bannerHeight_mobile: 250px;
$borderColor: rgba(#000, 0.05);

/*****/
$td-bgColor: #1a1a1a;
$td-bgColor-light: #222;
$td-bgColor-dark: #111;
$td-textColor: #b0b0b0;
$td-textColor-light: #cececf;
$td-textColor-dark: #aaa;
$td-borderColor: rgba(#fff, 0.05);

/****/
$headerBgColor: rgba(#000, 0.95);
$headerBgColor-light: rgba(#000, 0.8);
$headerBgColor-blur: rgba(#000, 0.15);
$headerTextColor: #dfdfdf;
$headerTextColor-highlight: #fff;

/****/
$floatDistance: 18px;

$animationTime-very-slow: 0.5s;
$animationTime-slow: 0.35s;
$animationTime: 0.2s;
$animationTime-fast: 0.1s;
$animationTimingFunc: cubic-bezier(.25,.46,.45,.94);

$void-font-sans: -apple-system, system-ui, sans-serif;
$void-font-default: 'Droid Serif', $void-font-sans;
$void-font-serif: 'Noto Serif SC', $void-font-sans;

@mixin bg {
    background: {
        size: cover;
        repeat: no-repeat;
        position: center;
    }
}

@mixin sidebar {
    color: $td-textColor;
    background: $td-bgColor-dark;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        right: 0;
    }
    100% {
        opacity: 1;
        right: 20px;
    }
}

@keyframes fade-out{
    0%{
        right: 20px;
        opacity: 1;
        transform: translateY(0);
    }
    100%{
        right: 20px;
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes float-down {
    0% {
        opacity: 0;
        transform: translateY(-$floatDistance);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float-up {
    0% {
        opacity: 0;
        transform: translateY($floatDistance);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes switch {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: rotate(180deg);
        opacity: 0;
    }
    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}